<template>
  <div class="mycenter">
    <van-nav-bar :title="$route.meta.title">
      <template #right>
        <div
          class="set"
          @click="goSelf"
        >
          <i class="iconfont icon-shezhi1"></i>
        </div>
      </template>
    </van-nav-bar>
    <div class="myself">
      <div class="userInfo">
        <div class="head">
          <img
            src="https://kang-1305144775.cos.ap-nanjing.myqcloud.com/zys.JPG"
            alt=""
          >
        </div>
        <div class="user">
          <div class="username">猪医生</div>
          <div class="phone">131****9662</div>
        </div>
      </div>
    </div>
    <div class="service">
      <van-grid :column-num="4">
        <van-grid-item
          v-for="item in enterImage"
          :key="item.id"
          class="iconfont"
          :class="item.src"
          :text="item.text"
        />
      </van-grid>
    </div>
  </div>
</template>
<script>
export default {
  components: {

  },
  data: () => ({
    enterImage: [
      {
        id: 1,
        src: 'icon-daipingjia',
        text: '待评价'
      },
      {
        id: 2,
        src: 'icon-daifukuan',
        text: '待付款'
      },
      {
        id: 3,
        src: 'icon-zaixiankefu',
        text: '在线客服'
      },
      {
        id: 4,
        src: 'icon-Message-center',
        text: '消息中心'
      },
      {
        id: 5,
        src: 'icon-yonghufankui',
        text: '用户反馈'
      },
      {
        id: 6,
        src: 'icon-4-141',
        text: '全部预约'
      }
    ]
  }),
  methods: {
    goSelf() {
      this.$router.push('/mycenter/self')
    }
  }
}
</script>
<style lang="scss" scoped>
.mycenter {
  // box-sizing: border-box;
  width: 100%;
  height: 90%;
  background: linear-gradient(#76deca 10%, #f0f0f0 90%);
  .set {
    .iconfont {
      font-size: 10px;
    }
  }
  .myself {
    .userInfo {
      display: flex;
      margin-left: 10px;
      margin-top: 10px;
      .head {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .user {
        height: 30px;
        div {
          margin-top: 4px;
          font-size: 7px;
        }
        .phone {
          font-size: 4px;
        }
      }
    }
  }
  .service {
    width: 80%;
    height: 50%;
    border-radius: 4px 4px 0 0;
    margin: 20px auto;
    background-color: #eeeeee;
    ::v-deep .van-grid-item__content {
      background: #eee;
      height: 10px;
    }
    .van-grid {
      .iconfont {
        font-size: 10px;
        text-align: center;
      }
    }
    .van-grid-item {
      margin-top: 10px;
    }
  }
}
</style>
